<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <form action="#">
        <p>
            用户名<input type="text">
            <span>
                (提示:以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
            </span>
        </p>
        <p>
            密码<input type="password">
            <span>
                (提示:以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
            </span>
        </p>
        <script>
            //规则对象
            let rule_obj={
                "text":/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,
                "password":/^[a-zA-Z]\w{5,17}$/
            }
            $("input").blur(function () {
                //拿到当前type的值,因为 type的值 和 规则对象的 键  是对应的
                let type = $(this).prop("type")
                //获取输入的值
                let in_val=$(this).val()
                //定义规则
                let rule=rule_obj[type]
                // 利用规则对象 进行校验
                let bool1 = rule.test(in_val)
                //对或错给不同的提示
                if (bool1) {
                    $(this).next().text("输入正确")
                } else {
                    $(this).next().text("输入错误,请重新输入")
                }
            })
        </script>
    </form>
</body>
</html>